// pages/cart/component/cart.js
import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { userStore } from '@/stores/userstore'
import { reqCartList, reqUpdateChecked, reqAddCart,reqDelCartGoods,reqCheckAllStatus } from '@/api/cart'
import { debounce } from 'miniprogram-licia'
import { swiperCellBehavior } from '@/behaviors/swiperCell' // 删除滑块自动弹回

const computedBehavior = require('miniprogram-computed').behavior

ComponentWithStore({
  // 注册 behaviors
  behaviors: [computedBehavior,swiperCellBehavior],

  // 让页面 和 store 对象建立关联:
  storeBindings: {
    store: userStore,
    fields: ['token']
  },

  // 组件的初始数据
  data: {
    cartList: [],
    emptyDes: '还没有添加商品，快去添加吧～'
  },

  // 组件的方法列表
  methods: {
        // 全选和全不选功能
        async selectAllStatus(event) {
          // 获取全选和全不选的状态
          const isChecked = event.detail ? 1 : 0
          // 调用接口，更新服务器中商品的状态
          const res = await reqCheckAllStatus(isChecked)
    
          // 如果更新成功，需要将本地的数据一同改变
          if (res.code === 200) {
            // 将数据进行拷贝
            const newCart = JSON.parse(JSON.stringify(this.data.cartList))
            // 将数据进行更改
            newCart.forEach((item) => (item.isChecked = isChecked))
    
            // 进行赋值
            this.setData({
              cartList: newCart
            })
          }
        },

    // 删除购物车的商品：
    async delCartGoods(event){
      // console.log(event);
      const { id } = event.currentTarget.dataset // 获取需要删除商品的 id

      const modalRes =  await wx.modal({
        content:'您确认删除该商品吗？'
      })

      if(modalRes){
        await reqDelCartGoods(id)

        this.showTipGetList() // 重新获取数据
      }
    },

    // 更新购买数量：
    changeBuyNum: debounce(async function (event) {
      //  获取最新的购买数量：
      //  数量 最大是 200
      const newBuyNum = event.detail > 200 ? 200 : event.detail

      const { id, index, oldbuynum } = event.target.dataset// 获取商品id、索引、之前的购买数量：

      const reg = /^([1-9]|[1-9]\d|1\d{2}|200)$/  // 1-200 直接的正整数
      const regRes = reg.test(newBuyNum)  // 进行验证:true、fasle

      //  验证不通过：fasle
      if (!regRes) {
        this.setData({
          [`cartList[${index}].count`]: oldbuynum
        })
        return  // 阻止继续运行
      }

      // 验证通过：true
      const disCount = newBuyNum - oldbuynum

      // 判断数量是否发生改变：=0 未改变
      if (disCount === 0) return

      const res = await reqAddCart({ goodsId: id, count: disCount })

      // 更新本地AppData的数量：
      if (res.code === 200) {
        this.setData({
          [`cartList[${index}].count`]: newBuyNum,
          // 如果数量发生变化，单选按钮为选中状态：
          [`cartList[${index}].isChecked`]: 1

        })
      }
    },500),

    // 展示文案，同时获取 购物车列表数据：
    async showTipGetList() {

      // 解构数据：
      const { token } = this.data

      // 判断以后 是否登录：
      if (!token) {
        this.setData({
          emptyDes: '您尚未登录，点击登录获取更多权益',
          cartList: []
        })
        return
      }

      // 如果已经登录：
      const { code, data: cartList } = await reqCartList()

      if (code === 200) {
        this.setData({
          cartList,
          emptyDes: cartList.length === 0 && '还没有添加商品，快去添加吧~'
        })
      }
    },

    // 更新商品的购买状态：
    async updateChecked(event) {

      const { detail } = event // 获取最新的购买状态

      const { id, index } = event.target.dataset // 获取传递的 商品ID 以及索引

      const isChecked = detail ? 1 : 0  // 将最新的购买状态(勾选按钮)转换成后端接口需要使用的 0 和 1

      const res = await reqUpdateChecked(id, isChecked)

      // 当服务器更新购买状态(勾选按钮)成功以后，获取最新的 购物车列表数据
      if (res.code === 200) {
        // this.showTipGetList()

        this.setData({
          [`cartList[${index}].isChecked`]: isChecked
        })
      }
    },

    // 跳转到 结算 页面：
    toOrder(){
      //  判断是否 勾选商品：
      if(this.data.totalPrice === 0){
        wx.toast({
          title:'请选择需要购买的商品'
        })
        return 
      }

      wx.navigateTo({
        url: '/modules/orderPayModule/pages/order/detail/detail',
      })
    },

    onShow() {
      this.showTipGetList()
    },

    //  onHide ：页面隐藏时
   onHide(){
     this.onSwiperCellCommonClick()   // 关掉滑块
   },


  },

  // computed :计算属性
  computed: {
    // 全选 按钮：
    selectAllStatus(data) {
      return (
        data.cartList.length !== 0 && data.cartList.every((item) => item.isChecked === 1)
      )
    },

    // 计算订单总金额：
    totalPrice(data){
      let totalPrice = 0 // 总金额

      data.cartList.forEach(item => {
        //  判断商品是否选中： isChecked = 1
        if(item.isChecked === 1) {
          totalPrice += item.price * item.count
        }
      })

      return totalPrice
    }
  },
})
